<template>
  <div>
    <div ref='pie' :style="{height:'500px'}" style="text-align: center"></div>
  </div>
</template>

<script>
  export default {
    props: {
      series: {
        type: Array
      },
    },
    mounted() {
      this.year();
      console.log(JSON.stringify(this.series))
    },
    methods: {
      year() {
        let option = {
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              },
            },
            formatter: (data) => {
              let val;
              for (let a of data) {
                if (a.value != 0) {
                  val += '<span style="padding-right: 10px">' + a.seriesName + '</span>' + '<span style="float: right;">' + a.value + '</span><br/>'
                }
              }
              let html;
              if (val != undefined) {
                html = '<div style="padding: 10px 10px;font-weight: bold;font-size: 12px;text-align:left" v-html=' + val + '</div>';
              } else {
                html = '<div style="padding: 10px 10px;font-weight: bold;font-size: 12px;text-align:left">' + '无数据！' + '</div>';
              }
              return html;
            },
          },
          "grid": {
            "borderWidth": 0,
            left: 'center',
            top: 'center',
            width: '100%',
            height: '80%',
            textStyle: {
              color: "#fff"
            },
          },
          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": ['2019年', '2018年', '2017年', '2016年', '2015年', '2014年', '2013年', '2012年', '2011年', '2010年',],
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          series: this.series,
        };
        this.$refs.pie.style.width = window.innerWidth / 1.3 + 'px';
        let myCharts = this.$echarts.init(this.$refs.pie);
        myCharts.setOption(option);
      },
    }
  }
</script>

<style scoped>

</style>
